import React, { useState, useEffect } from 'react'
import '../static/less/update.less'

export default function Update() {
    let [account, setAccount] = useState("");
    let [phone, setPhone] = useState("");
    let [email, setEmail] = useState("");
    let [account1, setAccount1] = useState("");
    let [phone1, setPhone1] = useState("");
    let [email1, setEmail1] = useState("");
    const fileFn = () => {
        let acc = localStorage.getItem("account");
        let pho = localStorage.getItem("phone");
        let ema = localStorage.getItem("email");
        setAccount(acc);
        setPhone(pho);
        setEmail(ema);
    }

    const updateFn = (account,phone,email)=>{
        if(account != "" && phone != "" && email != ""){
            localStorage.setItem("account",account);
            localStorage.setItem("phone",phone);
            localStorage.setItem("email",email);
            fileFn()
            alert("修改成功")
        }
        else{
            alert("有数据为空")
        }
    }

    //初始化
    useEffect(() => {
        fileFn();
    }, [])

    return (
        <div className='update'>
            <div className='top'>
                <div className='back' onClick={
                    () => {
                        window.history.back();
                    }
                }></div>
                <h2 className='top-title'>修改资料</h2>
            </div>
            <div className="bottom">
                <div className='show'>
                    <h3 className='show_title'>我的资料</h3>
                    <div className='show_box'>账号：{account}</div>
                    <div className='show_box'>手机号：{phone}</div>
                    <div className='show_box'>邮箱：{email}</div>
                </div>
                <div className='bottom_bottom'>
                    <div className='inp-div'>
                        <input className='inp' type="text" placeholder='请输入账号' value={account1} onChange={(event) => {
                            let v = event.currentTarget.value;
                            setAccount1(v)
                        }} />
                    </div>
                    <div className='inp-div'>
                        <input className='inp' type="text" placeholder='请输入手机号' value={phone1} onChange={(event) => {
                            let v = event.currentTarget.value;
                            setPhone1(v)
                        }} />
                    </div>
                    <div className='inp-div'>
                        <input className='inp' type="text" placeholder='请输入邮箱' value={email1} onChange={(event) => {
                            let v = event.currentTarget.value;
                            setEmail1(v)
                        }} />
                    </div>
                    <div className='btn-div'>
                        <button className='btn' onClick={() => {
                            updateFn(account1,phone1,email1)
                        }}>修改</button>
                    </div>
                </div>
            </div>
        </div>
    )
}
